<!DOCTYPE html><html><head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>表格与表单标签规范应用</title>
   <style>
       /* 表格样式优化 */
       table {
           border-collapse: collapse;
           width: 100%;
           max-width: 900px;
           margin: 20px 0;
           font-family: Arial, sans-serif;
       }
       th, td {
           border: 1px solid #ddd;
           padding: 12px 15px;
           text-align: center;
       }
       th {
           background-color: #f0f4f8;
           font-weight: 600;
           color: #2d3748;
       }
       tbody tr:nth-child(even) {
           background-color: #f9fafb;
       }
       tfoot {
           font-weight: bold;
           color: #1a365d;
       }
       caption {
           font-size: 1.2em;
           margin-bottom: 10px;
           color: #2d3748;
       }

       /* 表单样式优化 */
       .form-container {
           max-width: 600px;
           margin: 30px 0;
           padding: 25px;
           border: 1px solid #e2e8f0;
           border-radius: 8px;
           background-color: #ffffff;
       }
       .form-fieldset {
           border: 1px solid #e2e8f0;
           border-radius: 6px;
           padding: 15px;
           margin-bottom: 20px;
       }
       .form-legend {
           padding: 0 10px;
           color: #2d3748;
           font-weight: 500;
       }
       .form-group {
           margin-bottom: 18px;
       }
       label {
           display: block;
           margin-bottom: 6px;
           color: #4a5568;
           font-size: 0.95em;
       }
       input, select, textarea {
           width: 100%;
           padding: 10px 12px;
           border: 1px solid #cbd5e0;
           border-radius: 4px;
           box-sizing: border-box;
           font-size: 1em;
       }
       input:focus, select:focus, textarea:focus {
           outline: none;
           border-color: #3182ce;
           box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
       }
       .radio-group, .checkbox-group {
           display: flex;
           gap: 15px;
           margin-top: 8px;
       }
       .radio-item, .checkbox-item {
           display: flex;
           align-items: center;
           gap: 5px;
       }
       .radio-item input, .checkbox-item input {
           width: auto; /* 修正单选/复选框宽度 */
       }
       button {
           padding: 10px 20px;
           border: none;
           border-radius: 4px;
           cursor: pointer;
           font-size: 0.95em;
           font-weight: 500;
       }
       .btn-submit {
           background-color: #22c55e;
           color: white;
       }
       .btn-reset {
           background-color: #ef4444;
           color: white;
           margin-left: 10px;
       }
   </style></head><body>
   <h1>HTML表格与表单核心标签实践</h1>

   <!-- 表格示例：含行列合并与语义化结构 -->
   <section>
       <h2>一、结构化表格应用（学生成绩汇总表）</h2>
       <table>
           <caption>2023级计算机专业秋季学期核心课程成绩表</caption>
           <!-- 表头：定义列标题 -->
           <thead>
               <tr>
                   <th rowspan="2">学号</th>
                   <th rowspan="2">姓名</th>
                   <th rowspan="2">性别</th>
                   <!-- 表头列合并 -->
                   <th colspan="3">核心课程成绩</th>
                   <th rowspan="2">平均成绩</th>
               </tr>
               <tr>
                   <th>高等数学</th>
                   <th>程序设计</th>
                   <th>计算机网络</th>
               </tr>
           </thead>
           <!-- 表体：数据主体区域 -->
           <tbody>
               <tr>
                   <td>2023001</td>
                   <td>张三</td>
                   <td>男</td>
                   <td>92</td>
                   <td>96</td>
                   <td>88</td>
                   <td>92</td>
               </tr>
               <tr>
                   <td>2023002</td>
                   <td>李四</td>
                   <td>女</td>
                   <td>89</td>
                   <td>91</td>
                   <td>94</td>
                   <td>91.3</td>
               </tr>
               <tr>
                   <td>2023003</td>
                   <td>王五</td>
                   <td>男</td>
                   <td>78</td>
                   <td>85</td>
                   <td>82</td>
                   <td>81.7</td>
               </tr>
           </tbody>
           <!-- 表脚：汇总数据 -->
           <tfoot>
               <tr>
                   <td colspan="3">年级平均分</td>
                   <td>86.3</td>
                   <td>90.7</td>
                   <td>88</td>
                   <td>88.3</td>
               </tr>
           </tfoot>
       </table>
   </section>

   <hr style="margin: 30px 0; border: none; border-top: 1px solid #e2e8f0;">

   <!-- 表单示例：含字段集、优化label关联与验证 -->
   <section>
       <h2>二、交互式表单应用（学生信息注册）</h2>
       <form action="submit-student.php" method="post" enctype="multipart/form-data">
           <!-- 基础信息字段集 -->
           <fieldset>
               <legend>1. 基础信息</legend>
               <div>
                   <label for="student-name">姓名 <span style="color: red;">*</span></label>
                   <input type="text" id="student-name" name="studentName" required
                          placeholder="请输入真实姓名" maxlength="10">
               </div>
               <div>
                   <label for="student-id">学号 <span style="color: red;">*</span></label>
                   <input type="text" id="student-id" name="studentId" required
                          pattern="2023\d{3}" title="需为2023开头的6位数字"
                          placeholder="例如：2023001">
               </div>
               <div>
                   <label>性别 <span style="color: red;">*</span></label>
                   <div>
                       <div>
                           <input type="radio" id="gender-male" name="gender" value="male" required>
                           <label for="gender-male">男</label>
                       </div>
                       <div>
                           <input type="radio" id="gender-female" name="gender" value="female">
                           <label for="gender-female">女</label>
                       </div>
                   </div>
               </div>
               <div>
                   <label for="birth-date">出生日期</label>
                   <input type="date" id="birth-date" name="birthDate" max="2005-12-31">
               </div>
           </fieldset>

           <!-- 专业与兴趣字段集 -->
           <fieldset>
               <legend>2. 专业与兴趣</legend>
               <div>
                   <label for="major-select">所属专业 <span style="color: red;">*</span></label>
                   <select id="major-select" name="major" required>
                       <option value="">请选择专业</option>
                       <option value="computer">计算机科学与技术</option>
                       <option value="software">软件工程</option>
                       <option value="network">网络工程</option>
                       <option value="ai">人工智能</option>
                   </select>
               </div>
               <div>
                   <label>兴趣爱好（可多选）</label>
                   <div>
                       <div>
                           <input type="checkbox" id="hobby-code" name="hobby" value="coding">
                           <label for="hobby-code">编程</label>
                       </div>
                       <div>
                           <input type="checkbox" id="hobby-design" name="hobby" value="design">
                           <label for="hobby-design">设计</label>
                       </div>
                       <div>
                           <input type="checkbox" id="hobby-research" name="hobby" value="research">
                           <label for="hobby-research">科研</label>
                       </div>
                   </div>
               </div>
           </fieldset>

           <!-- 附加信息字段集 -->
           <fieldset>
               <legend>3. 附加信息</legend>
               <div>
                   <label for="self-intro">个人简介</label>
                   <textarea id="self-intro" name="selfIntro" rows="4"
                             placeholder="请简要介绍自己的特长或经历（限300字）" maxlength="300"></textarea>
               </div>
               <div>
                   <label for="student-photo">上传证件照</label>
                   <input type="file" id="student-photo" name="studentPhoto"
                          accept="image/jpeg,image/png" max="2097152">
                   <p style="margin: 5px 0 0; color: #64748b; font-size: 0.85em;">
                       支持JPG/PNG格式，大小不超过2MB                    </p>
               </div>
           </fieldset>

           <!-- 提交与重置按钮 -->
           <div>
               <button type="submit">提交信息</button>
               <button type="reset">重置表单</button>
           </div>
       </form>
   </section></body></html>